<template>
  <!--  <div style="height: 800px">-->
  <div class="demo-scroll-top" ref="scroll">
    <!-- 基本信息 -->
    <div style="font-size: 14px">
      <Row>
        <Col><b>课件基本信息</b></Col>
      </Row>
      <br />
      <Row>
        <Col span="6"><b>课件名称：</b>{{ taskName }}</Col>
        <Col span="6"><b>开始时间：</b>{{ planStartTime }}</Col>
        <Col span="6"><b>结束时间：</b>{{ planEndTime }}</Col>
      </Row>

      <Row>
        <Col span="6"><b>课件一级类型：</b>{{ taskType }}</Col>
        <Col span="6"><b>课件二级类型：</b>{{ taskModeType }}</Col>
        <Col span="6" v-show="taskSecondType !== ''"><b>任务类型：</b>{{ taskSecondType }}</Col>
      </Row>
      <Row>
        <Col style="display: flex;">
          <div><b>想定文档：</b></div>
          <div v-bind:class="{'scenarioDoc': taskDocument !== ''}" @click="downloadFile(taskDocumentPath)">
            {{ taskDocument || '-' }}
          </div>
        </Col>
      </Row>
      <Row>
        <Col><b>试验简介：</b>{{ desc || '-' }}</Col>
      </Row>
      <Row class-name="placeAndSchedule">
        <Col span="12" class-name="placeAndSchedule-item padding-right-8">
          <div>
            <b>场地信息：</b>
          </div>
          <div style="flex: 1" class="list" v-if="placeList.length > 0">
            <div
              class="list-item"
              v-for="(item, index) in placeList"
              :key="index"
            >
              <div>{{ item.placeId ? placeInfo(item.placeId) : '-' }}：</div>
              <div style="flex: 1;">{{ item.placeDesc || '-' }}</div>
            </div>
          </div>
          <div style="flex: 1" class="list" v-else>
            <div class="list-item">
              -
            </div>
          </div>
        </Col>

        <Col span="12" class-name="placeAndSchedule-item padding-right-8">
          <div>
            <b>日程信息：</b>
          </div>
          <div style="flex: 1" class="list" v-if="agendaList.length > 0">
            <div
              class="list-item"
              v-for="(item, index) in agendaList"
              :key="index"
            >
              <div style="margin-right: 15px;">
                <span>{{ getYearMonthDay(item.startTime) }}：</span>
                <span>
									{{ getHourMinute(item.startTime) }} -
									{{ getHourMinute(item.endTime) }}
								</span>
              </div>
              <div style="flex: 1;">{{ item.agendaDesc }}</div>
            </div>
          </div>
          <div style="flex: 1" class="list" v-else>
            <div class="list-item">
              -
            </div>
          </div>
        </Col>
      </Row>
    </div>

    <Divider>靶场列表</Divider>
    <Table
      :columns="rangeListColumns"
      :data="rangeList"
      class="setMaxHeight"
    ></Table>

    <Divider>人员配置</Divider>
    <Row type="flex">
      <Col
        span="12"
        class-name="padding-right-8"
        v-if="redTeamPeopleList.length > 0"
      >
        <Row style="margin: 10px 0;">
          <Col span="24" align="center" class-name="font-bold">
            <span>红方队伍配置</span>
            <span class="fcolo">
							<span>队伍数</span>
							<span class="fontColorBlue">{{ redTeamPeopleList.length }}</span>
						</span>
          </Col>
        </Row>
        <Table
          :columns="redTeamColumns"
          :data="redTeamPeopleList"
          class="setMaxHeight"
        ></Table>
      </Col>
      <Col
        span="12"
        class-name="padding-right-8"
        v-if="blueTeamPeopleList.length > 0"
      >
        <Row style="margin: 10px 0;">
          <Col span="24" align="center" class-name="font-bold">
            <span>蓝方队伍配置</span>
            <span class="fcolo">
							<span>队伍数</span>
							<span class="fontColorBlue">{{ blueTeamPeopleList.length }}</span>
						</span>
          </Col>
        </Row>
        <Table
          :columns="redTeamColumns"
          :data="blueTeamPeopleList"
          class="setMaxHeight"
        ></Table>
      </Col>
      <Col
        span="12"
        class-name="padding-right-8"
        v-if="supportPersonList.length > 0"
      >
        <Row style="margin: 10px 0;">
          <Col span="24" align="center" class-name="font-bold">
            <span>支撑人员配置</span>
            <span class="fcolo">
							<span>人数</span>
							<span class="fontColorBlue">{{ supportPersonList.length }}</span>
						</span>
          </Col>
        </Row>
        <Table
          :columns="supportPersonColumns"
          :data="supportPersonList"
          class="setMaxHeight"
        ></Table>
      </Col>
      <Col
        span="12"
        class-name="padding-right-8"
        v-if="refreePersonList.length > 0"
      >
        <Row style="margin: 10px 0;">
          <Col span="24" align="center" class-name="font-bold">
            <span>裁判人员配置</span>
            <span class="fcolo">
							<span>人数</span>
							<span class="fontColorBlue">{{ refreePersonList.length }}</span>
						</span>
          </Col>
        </Row>
        <Table
          :columns="refreePersonColumns"
          :data="refreePersonList"
          class="setMaxHeight"
        ></Table>
      </Col>
      <Col
        span="12"
        class-name="padding-right-8"
        v-if="testerPersonList.length > 0"
      >
        <Row style="margin: 10px 0;">
          <Col span="24" align="center" class-name="font-bold">
            <span>测试人员配置</span>
            <span class="fcolo">
							<span>人数</span>
							<span class="fontColorBlue">{{ testerPersonList.length }}</span>
						</span>
          </Col>
        </Row>
        <Table
          :columns="otherPersonColumns"
          :data="testerPersonList"
          class="setMaxHeight"
        ></Table>
      </Col>
      <Col
        span="12"
        class-name="padding-right-8"
        v-if="studentPersonList.length > 0"
      >
        <Row style="margin: 10px 0;">
          <Col span="24" align="center" class-name="font-bold">
            <span>学员配置</span>
            <span class="fcolo">
							<span>人数</span>
							<span class="fontColorBlue">{{ studentPersonList.length }}</span>
						</span>
          </Col>
        </Row>
        <Table
          :columns="otherPersonColumns"
          :data="studentPersonList"
          class="setMaxHeight"
        ></Table>
      </Col>
      <Col
        span="12"
        class-name="padding-right-8"
        v-if="expertPersonList.length > 0"
      >
        <Row style="margin: 10px 0;">
          <Col span="24" align="center" class-name="font-bold">
            <span>评审专家配置</span>
            <span class="fcolo">
							<span>人数</span>
							<span class="fontColorBlue">{{ expertPersonList.length }}</span>
						</span>
          </Col>
        </Row>
        <Table
          :columns="otherPersonColumns"
          :data="expertPersonList"
          class="setMaxHeight"
        ></Table>
      </Col>
    </Row>

    <Divider>场景配置</Divider>
    <Row>
      <!-- CTF -->
      <Col span="24" v-if="secondModeType === 1 || secondModeType === 6">
        <Row style="margin: 10px 0;">
          <Col span="24" align="center"
          ><b
          >自选赛题数
            <span class="fontColorBlue fs-14 ">{{ ctfList.length }}</span>
            个</b
          ></Col
          >
        </Row>
        <Table
          :columns="ctfColumns"
          :data="ctfList"
          class="setMaxHeight"
        ></Table>
      </Col>

      <!-- HVV -->
      <Col
        span="24"
        class-name="scenario-configuration"
        v-if="secondModeType === 2"
      >
        <Row>
          <Col span="24">
            <div style="display: flex;">
              <div>已传文件：</div>
              <div
                class="fileList"
                v-if="docList && docList.docs && docList.docs.length > 0"
              >
                <div
                  class="fileItem"
                  v-for="(item, index) in docList && docList.docs"
                  :key="index"
                  @click="downloadFile(item.docPath)"
                >
                  {{ item.docName }}
                </div>
              </div>
              <div v-else>-</div>
            </div>
            <div style="display: flex;">
              <div>描述说明：</div>
              <div style="flex: 1;">{{ docList.otherDesc || '-' }}</div>
            </div>
          </Col>
        </Row>
        <Row style="margin: 10px 0;">
          <Col span="24" align="center"
          ><b
          >靶标数
            <span class="fontColorBlue fs-14 ">{{
                hvvTargetList.length
              }}</span>
            个</b
          ></Col
          >
        </Row>
        <Table
          :columns="hvvTargetColumns"
          :data="hvvTargetList"
          class="setMaxHeight"
        ></Table>
      </Col>

      <!-- Cloud -->
      <Col
        span="24"
        class-name="scenario-configuration"
        v-if="secondModeType === 4"
      >
        <Row>
          <Col span="24">
            <div style="display: flex;">
              <div>已传文件：</div>
              <div
                class="fileList"
                v-if="docList && docList.docs && docList.docs.length > 0"
              >
                <div
                  class="fileItem"
                  v-for="(item, index) in docList && docList.docs"
                  :key="index"
                  @click="downloadFile(item.docPath)"
                >
                  {{ item.docName }}
                </div>
              </div>
              <div v-else>-</div>
            </div>
            <div style="display: flex;">
              <div>描述说明：</div>
              <div style="flex: 1;">{{ docList.otherDesc || '-' }}</div>
            </div>
          </Col>
        </Row>
        <Row style="margin: 10px 0;">
          <Col span="24" align="center"
          ><b
          >服务器数
            <span class="fontColorBlue fs-14 ">{{
                cloudTargetList.length
              }}</span>
            个</b
          ></Col
          >
        </Row>
        <Table
          :columns="cloudTargetColumns"
          :data="cloudTargetList"
          class="setMaxHeight"
        ></Table>
      </Col>

      <!-- 课件 -->
      <Col span="24" v-if="secondModeType === 5">
        <Row style="margin: 10px 0;">
          <Col span="24" align="center"
          ><b
          >课件数
            <span class="fontColorBlue fs-14 ">{{
                coursewareList.length
              }}</span>
            个</b
          ></Col
          >
        </Row>
        <Table
          :columns="coursewareColumns"
          :data="coursewareList"
          class="setMaxHeight"
        ></Table>
      </Col>

      <!-- 众测 -->
      <Col
        span="24"
        class-name="scenario-configuration"
        v-if="secondModeType === 3 || secondModeType === 7"
      >
        <Row>
          <Col span="8">
            <div style="display: flex;">
              <div>范围文件：</div>
              <div class="fileList" v-if="massTestingFiles.length > 0">
                <div
                  class="fileItem"
                  v-for="(item, index) in massTestingFiles"
                  :key="index"
                  @click="downloadFile(item.docPath)"
                >
                  {{ item.docName }}
                </div>
              </div>
              <div v-else>-</div>
            </div>
            <div style="display: flex;">
              <div>描述说明：</div>
              <div style="flex: 1;">{{ docList.limitDesc || '-' }}</div>
            </div>
          </Col>
          <Col span="8">
            <div style="display: flex;">
              <div>限制条件文件：</div>
              <div class="fileList" v-if="limitConditionFiles.length > 0">
                <div
                  class="fileItem"
                  v-for="(item, index) in limitConditionFiles"
                  :key="index"
                  @click="downloadFile(item.docPath)"
                >
                  {{ item.docName }}
                </div>
              </div>
              <div v-else>-</div>
            </div>
            <div style="display: flex;">
              <div>描述说明：</div>
              <div style="flex: 1;">{{ docList.restrictionsDesc || '-' }}</div>
            </div>
          </Col>
          <Col span="8">
            <div style="display: flex;">
              <div>部署描述文件：</div>
              <div
                class="fileList"
                v-if="deploymentDescriptionFiles.length > 0"
              >
                <div
                  class="fileItem"
                  v-for="(item, index) in deploymentDescriptionFiles"
                  :key="index"
                  @click="downloadFile(item.docPath)"
                >
                  {{ item.docName }}
                </div>
              </div>
              <div v-else>-</div>
            </div>
            <div style="display: flex;">
              <div>描述说明：</div>
              <div style="flex: 1;">{{ docList.deployDesc || '-' }}</div>
            </div>
          </Col>
        </Row>
        <Row style="margin: 10px 0;">
          <Col span="24" align="center"
          ><b
          >镜像靶标数
            <span class="fontColorBlue fs-14 ">{{
                imageTargetList.length
              }}</span>
            个</b
          ></Col
          >
        </Row>
        <Table
          :columns="imageTargetColumns"
          :data="imageTargetList"
          class="setMaxHeight"
        ></Table>
        <Row style="margin: 10px 0;">
          <Col span="24" align="center"
          ><b
          >实物靶标数
            <span class="fontColorBlue fs-14 ">{{
                deviceTargetList.length
              }}</span>
            个</b
          ></Col
          >
        </Row>
        <Table
          :columns="coursewareColumns"
          :data="deviceTargetList"
          class="setMaxHeight"
        ></Table>
        <Row style="margin: 10px 0;">
          <Col span="24" align="center"
          ><b
          >场景靶标数
            <span class="fontColorBlue fs-14 ">{{
                sceneTargetList.length
              }}</span>
            个</b
          ></Col
          >
        </Row>
        <Table
          :columns="sceneTargetColumns"
          :data="sceneTargetList"
          class="setMaxHeight"
        ></Table>
      </Col>
    </Row>

    <Divider>规则配置</Divider>
    <Row>
      <Col span="24" class-name="scenario-configuration">
        <div style="display: flex;">
          <div>已传文件：</div>
          <div class="fileList" v-if="rulesData.ruleList.length > 0">
            <div
              class="fileItem"
              v-for="(item, index) in rulesData.ruleList"
              :key="index"
              @click="downloadFile(item.filePath)"
            >
              {{ item.fileName }}
            </div>
          </div>
          <div v-else>-</div>
        </div>
        <div style="display: flex;">
          <div>描述说明：</div>
          <div style="flex: 1;">{{ rulesData.desc || '-' }}</div>
        </div>
      </Col>
    </Row>

    <!--成员信息-->
    <Modal
      v-model="showMeberList"
      class-name="vertical-center-modal-member"
      scrollable
      title="成员信息"
      ok-text="确定"
      width="1250"
      :mask-closable="false"
      :footer-hide="true"
    >
      <Table
        :columns="memberListColumns"
        :data="memberList"
        class="setMaxHeight"
      ></Table>
      <div class="padding-15 font-bold">
        <span>合计：</span>
        <span class="fontColorBlue fs-14">{{ memberList.length }}</span>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  name: 'taskdetail',
  props: {
    taskDetail: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  data() {
    return {
      // 任务名
      taskName: '',
      // 开始时间
      planStartTime: '',
      // 结束时间
      planEndTime: '',
      // 一级分类
      taskType: '',
      // 二级分类
      taskModeType:'',
      // 任务类型
      taskSecondType: '',
      // 想定文件名
      taskDocument: '',
      // 试验简介
      desc: '',
      // 想定文件路径
      taskDocumentPath: '',
      // 任务描述
      taskDescription: '',
      // 场地信息
      placeList: [],
      // 日程信息
      agendaList: [],
      /**
       * 试验任务类型 1-CTF 6-攻防赛 7-综合演练(1,6,7都属于一级类型攻防演练, 二级类型 内打内, 外打内下的类型, 需要注意的是综合演练的场景配置和众测的场景配置一样包含: 镜像靶标、实物靶标、场景靶标)
       * 2-护网类型 3-众测 4-云化 5-培训
       */
      secondModeType: 1,

      // 靶场信息
      rangeListColumns: [
        {
          title: '名称',
          key: 'name',
          align: 'center',
        },
        {
          title: '靶场ID',
          key: 'id',
          align: 'center',
        },
        {
          title: '网络地址',
          key: 'host',
          align: 'center',
        },
        {
          title: '备注',
          key: 'description',
          align: 'center',
          tooltip: true,
          ellipsis: true,
        },
      ],
      rangeList: [],

      // 红蓝队伍信息
      redTeamColumns: [
        {
          title: '队伍名称',
          key: 'name',
          align: 'center',
        },
        {
          title: '所属单位',
          key: 'companyName',
          align: 'center',
        },
        {
          title: '指导老师',
          key: 'instructor',
          align: 'center',
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h(
              'Button',
              {
                props: {
                  type: 'info',
                },
                on: {
                  click: () => {
                    this.showMeberList = true;
                    if ('listMemberDtoRed' in params.row) {
                      this.memberList = params.row.listMemberDtoRed;
                    } else {
                      this.memberList = params.row.listMemberDtoBlue;
                    }
                  },
                },
              },
              '成员信息'
            );
          },
        },
      ],
      redTeamPeopleList: [],
      blueTeamPeopleList: [],

      // 裁判人员信息
      refreePersonColumns: [
        {
          title: '人员名称',
          key: 'name',
          align: 'center',
        },
        {
          title: '所属单位',
          key: 'companyName',
          align: 'center',
        },
        {
          title: '手机号码',
          key: 'mobile',
          align: 'center',
        },
        {
          title: '账号',
          key: 'accountName',
          align: 'center',
        },
        {
          title: '密码',
          key: 'password',
          align: 'center',
        },
      ],
      refreePersonList: [],

      // 其他人员信息 测试人员, 学员
      otherPersonColumns: [
        {
          title: '人员名称',
          key: 'userName',
          align: 'center',
        },
        {
          title: '所属单位',
          key: 'companyName',
          align: 'center',
        },
        {
          title: '手机号码',
          key: 'mobile',
          align: 'center',
        },
        {
          title: '账号',
          key: 'accountName',
          align: 'center',
        },
        {
          title: '密码',
          key: 'password',
          align: 'center',
        },
      ],

      testerPersonList: [],

      studentPersonList: [],

      expertPersonList: [],

      supportPersonColumns: [
        {
          title: '人员名称',
          key: 'userName',
          align: 'center',
        },
        {
          title: '所属单位',
          key: 'companyName',
          align: 'center',
        },
        {
          title: '人员权限',
          key: 'braceType',
          align: 'center',
        },
        {
          title: '手机号码',
          key: 'mobile',
          align: 'center',
        },
        {
          title: '账号',
          key: 'accountName',
          align: 'center',
        },
        {
          title: '密码',
          key: 'password',
          align: 'center',
        },
      ],
      supportPersonList: [],

      ctfColumns: [
        {
          title: '题目名称',
          key: 'name',
          align: 'center',
        },
        {
          title: '类型',
          key: 'category',
          align: 'center',
        },
        {
          title: 'FLAG情况',
          key: 'score',
          align: 'center',
        },
        {
          title: 'FLAG地址',
          key: 'flagPath',
          align: 'center',
        },
        {
          title: '所属靶场',
          key: 'rangeName',
          align: 'center',
        },
        {
          title: '备注',
          key: 'description',
          align: 'center',
          tooltip: true,
          ellipsis: true,
        },
      ],
      ctfList: [],

      hvvTargetColumns: [
        {
          title: '靶标/场景名称',
          key: 'company',
          align: 'center',
        },
        {
          title: 'URL(网址)',
          key: 'url',
          align: 'center',
        },
        {
          title: '区域',
          key: 'district',
          align: 'center',
        },
        {
          title: '行业',
          key: 'dictName',
          align: 'center',
        },
        {
          title: '是否公共目标',
          key: 'publicTarget',
          align: 'center',
          render: (h, params) => {
            let text = params.row.publicTarget === 1 ? '是': '否';
            return h('div', text);
          },
        },
        {
          title: '是否分配队伍',
          key: 'available',
          align: 'center',
          render: (h, params) => {
            let text = params.row.available === 1 ? '已分配': '未分配';
            return h('div', text);
          },
        },
        {
          title: '队伍名',
          key: 'teamName',
          align: 'center',
          render: (h, params) => {
            let text = params.row.teamName !== undefined ? params.row.teamName : '--';
            return h('div', text);
          },
        },
      ],
      hvvTargetList: [],

      cloudTargetColumns: [
        {
          title: '服务器名称',
          key: 'name',
          align: 'center',
        },
        {
          title: '靶场',
          key: 'rangeName',
          align: 'center',
        },
        {
          title: '操作系统',
          key: 'osType',
          align: 'center',
          render: (h, params) => {
            const text = params.row.imageInfo.osType;
            return h('div', text);
          },
        },
        {
          title: '虚拟化类型',
          key: 'virtualization',
          align: 'center',
          render: (h, params) => {
            const text = params.row.imageInfo.nodeType;
            return h('div', text);
          },
        },
        {
          title: '配置',
          key: 'flavorName',
          align: 'center',
          render: (h, params) => {
            const text = params.row.flavorInfo.flavorName;
            return h('div', text);
          },
        },
        {
          title: '镜像',
          key: 'imageName',
          align: 'center',
          render: (h, params) => {
            const text = params.row.imageInfo.imageName;
            return h('div', text);
          },
        },
      ],
      cloudTargetList: [],

      coursewareColumns: [
        {
          title: '设备名称',
          key: 'name',
          align: 'center',
        },
        {
          title: '单位名称',
          key: 'companyName',
          align: 'center',
        },
        {
          title: '创建者',
          key: 'userName',
          align: 'center',
        },
        {
          title: '创建时间',
          key: 'created',
          align: 'center',
        },
        {
          title: '备注',
          key: 'description',
          align: 'center',
          tooltip: true,
          ellipsis: true,
        },
      ],
      coursewareList: [],

      imageTargetColumns: [
        {
          title: '镜像名称',
          key: 'imageName',
          align: 'center',
        },
        {
          title: '系统类型',
          key: 'osType',
          align: 'center',
        },
        {
          title: '系统版本',
          key: 'osVersion',
          align: 'center',
        },
        {
          title: '虚拟化类型',
          key: 'nodeType',
          align: 'center',
        },
        {
          title: '镜像大小GB',
          key: 'imageSize',
          align: 'center',
          render: (h, params) => {
            return h('div', this.getImageSize(params.row.imageSize) + 'GB');
          },
        },
        {
          title: '硬盘GB',
          key: 'minDisk',
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.minDisk + 'GB');
          },
        },
        {
          title: '内存MB',
          key: 'minRam',
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.minRam + 'MB');
          },
        },
      ],
      imageTargetList: [],

      deviceTargetColums: [
        {
          title: '设备名称',
          key: 'name',
          align: 'center',
        },
        {
          title: '单位名称',
          key: 'companyName',
          align: 'center',
        },
        {
          title: '创建者',
          key: 'creatorName',
          align: 'center',
        },
        {
          title: '创建时间',
          key: 'createTime',
          align: 'center',
        },
        {
          title: '备注',
          key: 'description',
          align: 'center',
          tooltip: true,
          ellipsis: true,
        },
      ],
      deviceTargetList: [],

      sceneTargetColumns: [
        {
          title: '场景名称',
          key: 'name',
          align: 'center',
        },
        {
          title: '单位名称',
          key: 'companyName',
          align: 'center',
        },
        {
          title: '场景类型',
          key: 'prototype',
          align: 'center',
        },
        {
          title: '创建者',
          key: 'creatorName',
          align: 'center',
        },
        {
          title: '创建时间',
          key: 'created',
          align: 'center',
        },
        {
          title: '备注',
          key: 'description',
          align: 'center',
          tooltip: true,
          ellipsis: true,
        },
      ],
      sceneTargetList: [],

      docList: {},

      massTestingFiles: [],
      limitConditionFiles: [],
      deploymentDescriptionFiles: [],

      rulesData: {
        desc: '',
        ruleList: [],
      },

      // 显示成员信息弹窗
      showMeberList: false,
      // 成员信息
      memberListColumns: [
        {
          title: '昵称',
          key: 'userName',
          align: 'center',
        },
        {
          title: '性别',
          key: 'sex',
          align: 'center',
          render: (h, params) => {
            let text = params.row.sex ? '男' : '女';
            return h('div', text);
          },
        },
        {
          title: '学历',
          key: 'education',
          align: 'center',
        },
        {
          title: '身份证',
          key: 'identityCard',
          align: 'center',
        },
        {
          title: '手机号',
          key: 'mobile',
          align: 'center',
        },
        {
          title: '是否是队长',
          key: 'isCaptain',
          align: 'center',
          render: (h, params) => {
            let text = params.row.isCaptain ? '是' : '否';
            return h('div', text);
          },
        },
        {
          title: '账号',
          key: 'accountName',
          align: 'center',
        },
        {
          title: '密码',
          key: 'password',
          align: 'center',
        },
      ],
      memberList: [{}],
    };
  },

  watch: {
    taskDetail: {
      handler: function(newValue, oldValue) {
        console.log('taskDetail', newValue);
        if (newValue) {
          const {
            name,
            planStartTime,
            planEndTime,
            subrangeList = [],
            agendaList = [],
            placeList = [],
            desc,
            type,
            modeType,
            doc,
            docMinioPath,
            accessAllArrayDto,
            secondModeType,
            targetCTFList = [],
            targetHwList = [],
            docList,
            cloudTargetList = [],
            courseList = [],
            targetPubtestMap,
            taskRulesDto,
          } = newValue;
          this.taskName = name;
          this.planStartTime = planStartTime;
          this.planEndTime = planEndTime;
          this.desc = desc;
          this.taskType = this.firstGradeType(type);
          this.taskModeType = this.modeType(modeType);
          this.taskSecondType = this.secondGradeType(secondModeType);
          this.taskDocument = doc;
          this.taskDocumentPath = docMinioPath;
          this.agendaList = agendaList;
          this.placeList = placeList;
          this.rangeList = subrangeList;
          this.redTeamPeopleList =
            accessAllArrayDto && accessAllArrayDto.listRanksDtoRed
              ? accessAllArrayDto.listRanksDtoRed
              : [];
          this.blueTeamPeopleList =
            accessAllArrayDto && accessAllArrayDto.listRanksDtoBlue
              ? accessAllArrayDto.listRanksDtoBlue
              : [];
          this.refreePersonList =
            accessAllArrayDto && accessAllArrayDto.listRefereeDto
              ? accessAllArrayDto.listRefereeDto
              : [];

          const listManagerMember =
            accessAllArrayDto && accessAllArrayDto.listManagerMember;
          // 根据type=SUPPORT找到支撑人员
          const supportPerson = listManagerMember.find(
            (item) => item.type === 'SUPPORT'
          );
          this.supportPersonList = supportPerson ? supportPerson.list : [];

          // 根据type=TESTER找到测试人员
          const testerPerson = listManagerMember.find(
            (item) => item.type === 'TESTER'
          );
          this.testerPersonList = testerPerson ? testerPerson.list : [];

          // 根据type=STUDENT找到学生人员
          const studentPerson = listManagerMember.find(
            (item) => item.type === 'STUDENT'
          );
          this.studentPersonList = studentPerson ? studentPerson.list : [];

          // 根据type=REVIEW找到专家人员
          const expertPerson = listManagerMember.find(
            (item) => item.type === 'REVIEW'
          );
          this.expertPersonList = expertPerson ? expertPerson.list : [];

          // 试验任务类型
          this.secondModeType = secondModeType;

          this.ctfList = targetCTFList;

          this.hvvTargetList = targetHwList;

          this.docList = docList || {};

          if (docList && docList.docs.length) {
            // 范围
            this.massTestingFiles = docList.docs.filter(
              (item) => item.type === 1
            );

            // 获取限制条件文件
            this.limitConditionFiles = docList.docs.filter(
              (item) => item.type === 2
            );

            // 获取部署描述文件
            this.deploymentDescriptionFiles = docList.docs.filter(
              (item) => item.type === 3
            );
          }

          this.cloudTargetList = cloudTargetList;

          this.coursewareList = courseList;

          this.imageTargetList =
            (targetPubtestMap && targetPubtestMap.images) || [];
          this.deviceTargetList =
            (targetPubtestMap && targetPubtestMap.devices) || [];
          this.sceneTargetList =
            (targetPubtestMap && targetPubtestMap.template) || [];

          const rulesData = taskRulesDto;
          if (rulesData) {
            let fileDataArr = [];
            if (rulesData.scoringRulesDoc) {
              fileDataArr = rulesData.scoringRulesDoc
                .split(',')
                .map((item, index) => {
                  return {
                    fileName: item,
                    filePath: rulesData.scoringRulesDocMinio.split(',')[index],
                  };
                });
            }
            this.rulesData = {
              desc: rulesData.additionalRulesContent,
              ruleList: fileDataArr,
            };
          }
        }
      },
      immediate: true,
    },
  },

  methods: {
    // 位置信息
    placeInfo: function(str) {
      const type = {
        1: '选手位置',
        2: '裁判位置',
        3: '大屏位置',
      };
      return type[str];
    },

    // 一级任务类型
    firstGradeType: function(str) {
      const type = {
        1: '安全技术研究',
        2: '网络新技术验证',
        3: '系统评测',
        4: '安全众测',
        5: '攻防演练',
        6: '人才培训',
      };
      return type[str];
    },

    // 二级任务类型
    modeType: function(str) {
      const type = {
        1: '内打内',
        2: '内打外',
        3: '外打内',
        4: '外打外',
      };
      return type[str];
    },

    // 任务类型
    secondGradeType: function(str) {
      const type = {
        1: '夺旗赛',
        2: '',
        3: '',
        4: '',
        5: '',
        6: 'CTF攻防赛',
        7: '综合演练'
      };
      return type[str];
    },

    // ctf赛题flag类型
    flagSituation: function(value) {
      const flagSituation = {
        0: 'flag',
        1: 'flagPath',
        2: 'flagMatchType',
      };
      return flagSituation[value];
    },

    // 课件类型
    coursewareType: function(value) {
      const coursewareType = {
        0: '理论课件',
        1: '实操课件',
        2: '文本课件',
      };
      return coursewareType[value];
    },

    // 课件难度
    coursewareDifficulty: function(value) {
      const coursewareDifficulty = {
        Simple: '简单',
        Medium: '中等',
        Hard: '较难',
      };
      return coursewareDifficulty[value];
    },

    // 获取镜像大小为GB
    getImageSize: function(size) {
      return (size / 1024 / 1024 / 1024).toFixed(2);
    },

    /**
     * 获取年月日
     */
    getYearMonthDay: function(time) {
      const date = new Date(time);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}-${month < 10 ? '0' + month : month}-${
        day < 10 ? '0' + day : day
      }`;
    },

    /**
     * 获取时分
     */
    getHourMinute: function(time) {
      const date = new Date(time);
      const hour = date.getHours();
      const minute = date.getMinutes();
      return `${hour < 10 ? '0' + hour : hour}:${
        minute < 10 ? '0' + minute : minute
      }`;
    },

    /**
     * 文件下载
     * @param {string} path
     */
    downloadFile: function(path) {
      if (!path) {
        return;
      }
      let downloadURL = `${this.baseURL}/nsrep-trial-distributed/task/downLoadConfigFile?minioPath=${path}`;
      window.openTrain(downloadURL);
    },
  },
};
</script>

<style scoped>
div,
span {
  /* 英文换行 */
  word-break: break-all;
}
.setMaxHeight /deep/ .ivu-table-body {
  max-height: 300px;
  overflow: auto;
  overflow-x: hidden;
}
.fs-14 {
  font-size: 14px;
}
.fontColorBlue {
  color: rgb(45, 140, 240);
}
.font-bold {
  font-weight: bold;
}

.padding-15 {
  padding: 15px 0;
}

.padding-right-8 {
  padding-right: 8px;
}
.demo-scroll-top {
  max-height: 80vh;
  overflow: auto;
  padding: 0 20px;
  /*border: 1px solid #999;*/
}

.placeAndSchedule {
  margin-top: 5px;
}

.placeAndSchedule .placeAndSchedule-item {
  display: flex;
}
.placeAndSchedule .placeAndSchedule-item .list {
  height: 100px;
  overflow: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px;
}
.placeAndSchedule .placeAndSchedule-item .list .list-item {
  display: flex;
}

.scenario-configuration .fileList {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.scenario-configuration .fileList .fileItem {
  color: rgb(45, 140, 240);
  cursor: pointer;
  margin-right: 15px;
}
.scenario-configuration .fileList .fileItem:hover {
  text-decoration: underline;
}

.scenarioDoc {
  cursor: pointer;
  color: rgb(45, 140, 240);
}

.scenarioDoc:hover {
  text-decoration: underline;
}
</style>
<style>
.vertical-center-modal-member {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vertical-center-modal-member .ivu-modal {
  top: 0;
}
.vertical-center-modal-member .ivu-modal-body {
  max-height: 400px;
}
</style>
